<template>
    <div>
        <div><i class="el-icon-star-on"></i>基础信息</div>
        <r-list :ColsNum="5" :width="120" :ListCols="ListCols" ListType="Info" :ListData="ListData"></r-list>
        <div class="mtb20 "><i class="el-icon-star-on"></i>商品信息</div>
        <r-table :tableData="tableData" :tableCols="tableCols" :bottomText="tableBottom" style="height:100px"></r-table>
        <div class="mt50"><i class="el-icon-star-on"></i>费用信息</div>
        <r-list :ColsNum="5" :ListCols="ListColsFeiyong" ListType="Info" :ListData="ListDataFeiyong"></r-list>
        <div class="mt20"><i class="el-icon-star-on"></i>订单利润分成</div>
        <r-list :ColsNum="4" :ListCols="ListColsFencheng" ListType="Info" :ListData="ListDataFencheng"></r-list>
    </div>
</template>
<script>
export default {
    data() {
        return {
            //基础信息
            ListCols: [
                [
                    {
                        label: '订单编号',
                        prop: 'orderNo',
                    },
                    {
                        label: '订单状态',
                        prop: 'state',
                        formatter: e => e.state == 0 ? '已创建' : e.state == 0 ? '待接单' : e.state == 0 ? '待配送' : e.state == 0 ? '已送达' : e.state == 0 ? '已完成' : e.state == 0 ? '已销毁' : e.state == 0 ? '已取消' : e.state == 0 ? '申请售后' : e.state == 0 ? '已退款' : e.state == 0 ? '不退款' : e.state == 0 ? '已超时' : ''
                    },
                    {
                        label: '支付方式',
                        prop: 'payType',
                        formatter: e => e.payType == 1 ? '微信支付' : e.payType == 2 ? '支付宝支付' : e.payType == 3 ? '余额支付' : ''
                    },
                    {
                        label: '支付金额',
                        prop: 'actuallyPaidMoney',
                    },
                    {
                        label: '支付时间',
                        prop: 'payTime',
                    },
                    {
                        label: '设备编号',
                        prop: 'equipmentNo',
                    },
                    {
                        label: '设备地址',
                        prop: 'address',
                    },
                    {
                        label: '所属代理商',
                        prop: 'agentName',
                    },
                    {
                        label: '所属商家',
                        prop: 'merchantName',
                    },
                    {
                        label: '',
                        prop: '',
                    },
                ]
            ],
            ListData: {
                // orderNo: 1,
                // orderStatus: '2',
                // payType: '3',
                // payMoney: '100',
                // payTime: '4',
                // deviceId: '5',
                // deviceAddress: '6',
                // agent: '7',
                // shop: '8',
            },
            ListDataFeiyong: {

            },
            //费用信息
            ListColsFeiyong: [
                [
                    {
                        label: '商品合计',
                        prop: 'copeMoney',
                        formatter: e => '￥' + e.copeMoney
                        // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                    },
                    {
                        label: '优惠金额',
                        prop: 'favorableMoney',
                        formatter: e => '￥' + e.favorableMoney
                    },
                    {
                        label: '应付款金额',
                        prop: 'actuallyPaidMoney',
                        formatter: e => '￥' + e.actuallyPaidMoney
                    },
                    {
                        label: '退款金额',
                        prop: 'refundMoney',
                        formatter: e => '￥' + e.refundMoney
                    },
                    {
                        label: '退款时间',
                        prop: 'refundTime',
                    },
                ]
            ],
            //订单分成利润
            ListDataFencheng: {
            },
            //订单分成利润信息
            ListColsFencheng: [
                [
                    {
                        label: '商品合计',
                        prop: 'money',
                        // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                        formatter: e => e&&e.money ? '￥' + e.money : '￥' + '0'
                    },
                    {
                        label: '分成金额',
                        prop: 'money',
                        // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                        formatter: e => e&&e.money ? '￥' + e.money : '￥' + '0'
                    },
                    {
                        label: '运营商分成',
                        prop: 'operatorBonusInfo',
                        formatter: e => e&&e.operatorBonusInfo && '￥' + JSON.parse(e.operatorBonusInfo).profit || '￥0'

                    },
                    {
                        label: '代理商分成',
                        prop: 'regionalBonusInfo.profit',
                        formatter: e => e&&e.regionalBonusInfo && '￥' + JSON.parse(e.regionalBonusInfo).profit || '￥0'
                    },
                    {
                        label: '商家分成',
                        prop: 'merchantBonusInfo.profit',
                        formatter: e => e&&e.merchantBonusInfo && '￥' + JSON.parse(e.merchantBonusInfo).profit || '￥0'
                    },
                ]
            ],
            //订单售后数据
            ListDataShouhou: {
                content: '未收到',
                servePic: ['http://photo.16pic.com/00/01/11/16pic_111395_b.jpg', 'http://photo.16pic.com/00/86/85/16pic_8685056_b.jpg'],
                cTime: '2020-02-02',
                serveStatus: '未处理',
                handleResult: '审核通过',
                handleTime: '2020-02-02',
            },
            //订单售后信息
            ListColsShouhou: [
                [
                    {
                        label: '反馈内容',
                        prop: 'content'
                        // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                    },
                    {
                        label: '售后图片',
                        prop: 'servePic',
                        type: 'img',
                        imglook: true
                    },
                    {
                        label: '申请时间',
                        prop: 'cTime'
                    },
                    {
                        label: '处理状态',
                        prop: 'serveStatus'
                    },
                    {
                        label: '处理结果',
                        prop: 'handleResult',
                        type: 'button',
                        btnList: [
                            {
                                label: '处理',
                                type: 'primary',
                                handle: e => this.showFrom(),
                                isShow: false
                            },
                        ]
                    },
                    {
                        label: '处理时间',
                        prop: 'handleTime'
                    },
                ]
            ],
            //称波动记录数据
            tableDataBodong: [
                {
                    doorId: '123',
                    weighId: '123',
                    goodsName: '123',
                    goodsType: '123',
                    weighChange: '123',
                    cTime: '123',
                },
            ],
            //称波动记录信息
            tableColsBodong: [
                {
                    label: '门编号',
                    prop: 'doorId',
                },
                {
                    label: '称编号',
                    prop: 'weighId'
                },
                {
                    label: '商品名称',
                    prop: 'goodsName'
                },
                {
                    label: '重量变化(g)',
                    prop: 'weighChange'
                },
                {
                    label: '创建时间',
                    prop: 'cTime'
                },
            ],
            // 商品数据
            tableData: [
            ],
            // 商品信息
            tableCols: [
                // {
                //     label: '商品图片',
                //     prop: 'goodsPic',
                //     type: 'image'
                //     // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                // },
                // {
                //     label: '商品分类',
                //     prop: 'goodsClassfy'
                // },
                {
                    label: '商品名称',
                    prop: 'goodsName'
                },
                // {
                //     label: '商品类型',
                //     prop: 'goodsType',
                //     formatter: e => e.goodsType == 1 ? '计件' : '称重'
                // },
                // {
                //     label: '单位',
                //     prop: 'unit'
                // },
                {
                    label: '单价',
                    prop: 'price'
                },
                // {
                //     label: '折扣价',
                //     prop: 'discount'
                // },
                {
                    label: '数量',
                    prop: 'num'
                },
                {
                    label: '小计',
                    prop: 'actuallyPaidMoney'
                }
            ],
            //合计栏
            tableBottom: { title: '合计', content: '', textAlign: 'right', color: '#f00', titleColor: '#000' },

            //合计栏
            formData: {
                orderPrice: "",
                returnPrice: ''
            },
            formCols: [
                { type: 'readonly', label: "订单支付金额", width: 350, prop: "orderPrice" },
                { type: 'input', label: "退款金额", width: 350, prop: "returnPrice" },
            ],
            formRules: {
                orderPrice: [
                    { required: false, message: '', trigger: 'blur' },
                ],
                returnPrice: [
                    { required: true, message: '请输入退款金额', trigger: 'blur' },
                ],
            },
            formHandle: [
                {
                    label: "取消",
                    handle: e => this.elFormVisible(),
                },
                {
                    label: "确定",
                    type: "success",
                    handle: e => this.elFormSubmit(),
                },

            ],

        };
    },
    components: {},
    computed: {},
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            let res = await this.api.cardorderinfo({
                id: this.$route.query.id
            })
            if (res) {
                this.ListData = res.data.order
                this.ListDataFencheng = res.data.bonus
                this.ListDataFeiyong = res.data.order
                this.tableData = [
                  {
                    goodsName:'袋子',
                    price:res.data.order.price,
                    num:res.data.order.num,
                    actuallyPaidMoney:res.data.order.actuallyPaidMoney,
                  }
                ]
                let sum = 0
                this.tableData.map(item => {
                    sum += item.subtotal
                })
                this.tableBottom.content = '￥' + res.data.order.actuallyPaidMoney
            }
        },
        showFrom() {
            this.$prompt(`请输入退款金额(支付金额:${this.ListData.actuallyPaidMoney})`, '提示', {
                confirmButtonText: '确定退款',
                cancelButtonText: '拒绝退款',
                distinguishCancelAndClose: true, cancelButtonClass: 'bg_danger',
                // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                // inputErrorMessage: '邮箱格式不正确'
            }).then(async ({ value }) => {
                let res = await this.api.orderRefund({
                    id: this.ListData.id,
                    state: 1,
                    refundMoney: value,
                })
                if (res) {
                    this.$message({
                        type: 'success',
                        message: '退款成功'
                    });
                }

            }).catch(async action => {
                if (action == 'cancel') {
                    let res = await this.api.orderRefund({
                        id: this.ListData.id,
                        state: 2,
                    })
                    if (res) {
                        this.$message({
                            type: 'info',
                            message: action === 'cancel'
                                ? '处理成功'
                                : ''
                        })
                    }
                }
            });

        }

    }
};
</script>
<style scoped lang='scss'>
</style>
